<template>
    <div>
        <!-- 页头 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>部门分类</el-breadcrumb-item>
            <el-breadcrumb-item>导航编辑</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card>
            <!-- 添加分类按钮 -->
            <el-button type="primary" class="addBtn" @click="addBranch">添加导航部门</el-button>
            <!-- 添加部门 -->
            <el-table
                :data="allBranchList"
                stripe
                border
                style="width: 100%">
                <el-table-column
                type="index"
                label="#"
                width="50">
                </el-table-column>
                <el-table-column
                
                label="导航部门名称"
                prop="navigation">
                </el-table-column>
                <el-table-column
               
                label="部门简介"
                prop="include">
                </el-table-column>
                <el-table-column
                
                label="创建时间"
                prop="creTime">
                    <template slot-scope="scope">
                        {{scope.row.creTime | formatDate}}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="handleEdit(scope.$index, scope.row)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDelete(scope.$index, scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <!-- 添加分类卡片 -->
        <el-dialog
        title="添加导航部门"
        :visible.sync="dialogVisible"
        width="30%"
        @close="handleFirstClose">
        <el-form ref="addFirstFormRef" :model="addFirstForm">
            <el-form-item label="导航部门" >
                <el-select
                    v-model="addFirstForm.navigation"
                    filterable
                    allow-create
                    default-first-option
                    placeholder="请选择或填写导航部门">
                    <el-option
                    v-for="item in fistOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="部门图标">
                <el-upload
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :action="baseUrl + 'oss/upload '"
                class="avatar-uploader">
                <img v-if="addFirstForm.cover" :src="addFirstForm.cover" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="部门简介" >
                <el-input type="textarea" v-model="addFirstForm.include"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addFirstBranch">确 定</el-button>
        </span>
        </el-dialog>

        <!-- 编辑名称 -->
        <el-dialog title="编辑导航" :visible.sync="editFormVisible">
        <el-form :model="editForm">
            <el-form-item label="导航部门名称" prop="navigation">
                <el-input v-model="editForm.navigation"></el-input>
            </el-form-item>
            <el-form-item label="部门图标" prop="cover">
                <el-upload
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :action="baseUrl + 'oss/upload '"
                class="avatar-uploader">
                <img v-if="editForm.cover" :src="editForm.cover" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="部门简介" prop="include">
                <el-input v-model="editForm.include"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="editFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="editBranch()">确 定</el-button>
        </div>
        </el-dialog>
    </div>
</template>

<script>
import Url from '../../../config'
export default {
    data() {
        return {
            baseUrl: Url.baseUrl, // 图片上传根地址
            // 添加按钮默认的选择
            fistOptions: [
                {
                    value: '学院',
                    label: '学院'
                }, 
                {
                    value: '计算机工程系',
                    label: '计算机工程系'
                }, 
                {
                    value: '经济与管理系',
                    label: '经济与管理系'
                }
            ],
            // 添加分类卡片的显示
            dialogVisible: false,
            addFirstForm: {
                navigation: [],
                include: '',
                cover: ''
            },
            allBranchList: [],
            editFormVisible: false,
            editForm: []
        }
    },
    mounted() {
        // 获取表单
        this.getAllBranchList()
    },
    methods: {
        addBranch() {
            this.dialogVisible = true
        },
        // 获取所有部门
        async getAllBranchList() {
            await this.$http.get('/coreService/navigation/getAll')
            .then((res) => {
                if(res.status) {
                    res.data.data.navigation.map((value, key) => {
                        // console.log(allBranchList.creTime);
                        this.allBranchList.push(value)
                    })  
                    console.log(this.allBranchList);
                }
            }) 
            .catch((err) => {
                console.log(err);
            })
        },
        // 添加一级部门
        addFirstBranch() {
            console.log(this.addFirstForm);
            this.$refs.addFirstFormRef.validate(async valid => {
                if(!valid) return 
                await this.$http.post('coreService/navigation/save', this.addFirstForm)
                .then((res) => {
                    if(res.data.status != 20000) {
                        this.$message.error("添加一级部门失败")
                    }
                    this.$message.success("添加一级部门成功")
                    this.dialogVisible = false
                    this.allBranchList = []
                    this.getAllBranchList()
                })
                .catch((err) => {
                    console.log(err);
                }) 
            })
        },
        // 关闭前做的事情 
        handleFirstClose() {
            this.$refs.addFirstFormRef.resetFields()
            this.addFirstForm.navigation = ''
            this.addFirstForm.include = ''
        },
        handleEdit(index, row) {
            this.editFormVisible = true
            this.getIdBranch(row.navId)
        },
        async handleDelete(index, row) {
            const confirmResult = await this.$confirm('此操作将永久删除该文件及【下属的所有栏目】, 是否继续?', '提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err => err)
            if(confirmResult !== 'confirm'){
                this.$message.info("已取消删除")
            }else {
                console.log(row);
                this.$http.delete('/coreService/navigation/delById?id=' + row.navId)
                .then((res) => {
                    if(res.data.status) {
                        this.$message.success("删除成功")
                    }
                    this.allBranchList = []
                    this.getAllBranchList()
                })
                .catch((err) => {
                    console.log(err);
                })
            }
        },
        // 根据导航栏id查询对应的数据
        getIdBranch(id) {
            this.$http.get("/coreService/navigation/getById?id=" + id)
            .then((res) => {
                if(res.data.status) {
                    this.editForm = res.data.data.nav
                }
            })
            .catch((err) => {
                console.log(err);
            })
        },
        // 编辑导航
        editBranch() {
            console.log(this.editForm.navId);
            this.$http.put("/coreService/navigation/updateById?navId=" + this.editForm.navId + '&navName=' + this.editForm.navigation +  '&cover=' + this.editForm.cover +'&include=' + this.editForm.include)
            .then((res) => {
                if(res.data.status) {
                    this.editFormVisible = false
                }
                this.allBranchList = []
                this.getAllBranchList()
            })
            .catch((err) => {
                console.log(err);
            })
        },
        // 上传部门图标
        handleAvatarSuccess(res, file) {
            console.log("成功");
            console.log(res)// 上传响应
            console.log(URL.createObjectURL(file.raw))// base64编码
            this.addFirstForm.cover = res.data.url
            this.editForm.cover = res.data.url
        },
        //上传之前
        beforeAvatarUpload(file) {
        // console.log("上传前");
        // console.log(file);
            const isJPG = file.type === 'image/jpeg'
            const isLt2M = file.size / 2048 / 2048 < 2
            if (!isJPG) {
                 this.$message.error('上传头像图片只能是 JPG 格式!')
            }
            if (!isLt2M){
                  this.$message.error('上传头像图片大小不能超过 4MB!')
            }
            return isJPG && isLt2M
        },
    },
}
</script>

<style lang="less" scoped>
.el-textarea {
    width: 54%;
}
.el-table--border {
    margin-top: 20px;
}
</style>